<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/summernote.css">
    
	<style>
        /* 调试用 */
        .talk { margin-top: 25px; }
        
        /* 占用空间 */
        .talk-content {
            min-height: 250px;
        }
        .talk-header, .talk-footer {
            height: 25px;
            max-height: 25px;
        }
        
        /* 边框 */
        .talk { 
            border: 1px solid #A9CBEE; 
            border-radius: 3px; 
        }
        .talk-header, .talk-content, .talk-footer { border-left: 1px solid #A9CBEE; }
        .talk-content { 
            border-top: 1px solid #A9CBEE;
            border-bottom: 1px solid #A9CBEE;
        }
        .talk-user-face {
            width: 100%;
            margin-top: 15px;
            padding: 1px;
            border: 1px solid #ccc;
        }
        
        /* 用户信息 */
        .talk-user-area {
            min-height: 300px;
            background-color: #eff4fb;
        }
        .talk-user-name {
            text-align: center;
            font-size: 1.1em;
            padding: 5px;
            margin: 3px auto;
        }
        .talk-user-name:before {
            font-weight: bold;
            color: #A9CBEE;
            font-size: 1em;
            content: "> ";
        }
        .talk-user-name:after {
            font-weight: bold;
            color: #A9CBEE;
            font-size: 1em;
            content: " <";           
        }
        .talk-user-name:hover::before {
            margin-right: 3px;
        }
        .talk-user-name:hover::after {
            margin-left: 3px;
        }
        .talk-hr {
            margin-top: -2px;
            margin-bottom: 0;
            border-top: 1px;
            border-top-color: #a9cbee;
            border-top-style: solid;            
        }
        
        /* talk头部 */
        .talk-header {
            color: #999;
            
        }
        .talk-header-start {
            padding-left: 15px;
            line-height: 25px;
            height: 25px;
            font-size: 12px;
            margin-top: 2px;
            display: inline-block;
        }
        .talk-header-end {
            padding-right: 15px;
            line-height: 25px;
            height: 25px;
            font-size: 12px;
            margin-top: 2px;
            display: inline-block;
            float: right;       
            font-weight: bold;
        }
        
        /* talk主体 */
        .talk-content {
            padding: 5px 15px;
            font-size: 16px;
        }
        
        /* 文本编辑器 */
        .talk-editer {
            padding: 0;
            font-size: 16px;
        }        
        .talk-editer .note-editor {
            margin: 10px 10px 0 10px;
        }
        .talk-editer .note-toolbar  {
            background-color: #eff4fb;
            border-color: #a9cbee;
        }
        .talk-editer .note-btn {
            border-color: #a9cbee;         
        }
        .talk-editer .note-resizebar {
            background-color: #eff4fb;
        }
        
        /* 文本编辑器中的图片附加样式 */
        .note-editable img {
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 2px;
        }
        /* 文本编辑器分割线 */
        .note-editer-hr {
            border-top: 1px;
            border-top-color: #a9cbee;
            border-top-style: solid;     
            margin-bottom: 20px;          
        }
        
        /* 文本编辑器标题 */
        .note-editer-title-container {
            padding: 10px 10px 0 10px;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            display: flex;
        }
        .note-editer-title-label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
            line-height: 25px;
            flex: 65px;
            font-size: 25px;
            margin-top: 5px;
        }
        .note-editer-title {
            width: 100%;
            border: 1px solid #A9CBEE;
            border-radius: 3px;
            padding: 2px 10px;
            line-height: 25px;
            font-size: 25px;
        }
        /* 遮罩层 */
        .talk-editer-cover {
            width: 100%;
            height: 416px;
            position: absolute;
            top: 0;
            background-color: rgba(250,235,215,0.5);
            border: 5px dashed #A9CBEE;
            border-radius: 3px;
        }
        .talk-editer-cover-msg {
            font-size: 24px;
            text-align: center;
            line-height: 416px;
        }
	</style>
  </head>
  <body>
    <div class="container">
      <div class="row talk">
        <div class="col-md-2 talk-user-area">
            <img class="talk-user-face" src="./img/1.jpg" width="100%" />
            <div class="talk-user-name"><a href="#">管理员$</a></div>
            <hr class="talk-hr" />
        </div>
        <div class="col-md-10 talk-area">
            <div class="row talk-header">
                <span class="talk-header-start">发布于: 2015-05-16 21:15:33</span>
                <span class="talk-header-end">楼主</span>
            </div>
            <div class="row talk-content">
                aslkdfjlaksdjflk;ajs;ldkf啊四道口附近拉开松井大辅；阿莱克
            </div>
            <div class="row talk-footer">
            </div>
        </div>        
      </div>
      <hr class="note-editer-hr"/>
      <div class="row">
        <div class="col-md-12 talk-editer">
            <div class="note-editer-title-container">
                <label class="note-editer-title-label" for="title">标题</label>
                <input class="note-editer-title" type="text" name="title" />            
            </div>
            <textarea name="text" class="summernote" id="contents"></textarea>
            <div class="talk-editer-cover">
                <div class="talk-editer-cover-msg">发 帖 前 请 先 <a href="#">登 录</a></div>
            </div>
        </div>
      </div>
    </div>

    <script src="js/jquery-2.2.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/summernote.js"></script>
    <script type="text/javascript" src="lang/summernote-zh-CN.js"></script>
    <script> 
    $(function() {
        $('.summernote').summernote({
            height: 300,
            lang: 'zh-CN',
        });

        $('[contenteditable]').each(function() {
            try { document.execCommand("AutoUrlDetect", false, false); } catch (e) {}
            
            $(this).on('paste', function(e) {
                e.preventDefault();
                var text = null;
            
                if(window.clipboardData && clipboardData.setData) {
                    text = window.clipboardData.getData('text');
                } else {
                    text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('');
                }
                if (document.body.createTextRange) {    
                    if (document.selection) {
                        textRange = document.selection.createRange();
                    } else if (window.getSelection) {
                        sel = window.getSelection();
                        var range = sel.getRangeAt(0);
                        var tempEl = document.createElement("span");
                        tempEl.innerHTML = "&#FEFF;";
                        range.deleteContents();
                        range.insertNode(tempEl);
                        textRange = document.body.createTextRange();
                        textRange.moveToElementText(tempEl);
                        tempEl.parentNode.removeChild(tempEl);
                    }
                    textRange.text = text;
                    textRange.collapse(false);
                    textRange.select();
                } else {
                    document.execCommand("insertText", false, text);
                }
            });
        });      
    });
    
    /*
    <div class="note-btn-group btn-group" style="float: right;">
        <button type="button" class="note-btn btn btn-default btn-sm btn-fullscreen" tabindex="-1" title="" data-original-title="全屏" style="font-weight: bold;line-height: 18px;">
            发送
        </button>
    </div>
    */
    </script>
  </body>
</html>
